<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的商城</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <div class="logo">我的商城</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">商品</a></li>
                <li><a href="#">购物车</a></li>
                <li><a href="#">订单</a></li>
            </ul>
        </nav>
    </div>

    <div class="carousel">
        <div class="slides">
            <img src="D:\code\hwjhtml\OIP-C (3).jpg" class="slide">
            <img src="D:\code\hwjhtml\OIP-C.jpg" alt="轮播图2" class="slide">
            <img src="D:\code\hwjhtml\OIP-C (3).jpg" alt="轮播图3" class="slide">
        </div>
        <div class="navigation">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    </div>

    <div class="recommended-products">
        <h2>推荐商品</h2>
        <div class="product-list">
            <div class="product-item">
                <img src="D:\code\hwjhtml\1.jpg" alt="智能手机">
                <h3>智能手机</h3>
                <p>¥9999</p>
                <a href="#">查看详情</a>
            </div>
            <div class="product-item">
                <img src="D:\code\hwjhtml\1.jpg" alt="电脑">
                <h3>电脑</h3>
                <p>¥19999</p>
                <a href="#">查看详情</a>
            </div>
           
        </div>
    </div>

    <div class="footer">
    

    <script>
        let slideIndex = 1;
        showSlides(slideIndex);

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            let i;
            let slides = document.getElementsByClassName("slide");
            let dots = document.getElementsByClassName("dot");
            if (n > slides.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = slides.length }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
        }

        
        setInterval(function() {
            slideIndex++;
            showSlides(slideIndex);
        }, 3000);
    </script>
</body>
</html>